<template>
  <div class="article-page">
    <layout>
      <background class="bg"></background>
      <transition name="fade">
        <article v-if="loaded">
          <left class="left" :msg="leftData"></left>
          <right class="right" :msg="rightData"></right>
          <div class="main">
            <top :msg="topData"></top>
            <middle class="middle" :msg="middleData"></middle>
            <div class="line"></div>
            <bottom class="bottom" :msg="bottomData"></bottom>
          </div>
        </article>
        <loading v-else class="page-loading"></loading>
      </transition>
    </layout>
    
  </div>
</template>

<script>
import request from "@/requests";

import Background from '@/components/Background/ArticleBg.vue';

import Layout from '@/layout/index';

import Loading from '@/components/Loading/index';
import Top from "./top";
import Middle from './middle';
import Bottom from './bottom';
import Left from './left';
import Right from './right';

export default {
  name: "Article",
  data() {
    return {
      indexData: Object,
      loaded: false
    };
  },
  computed: {
    topData() {
      const data = this.indexData;
      return {
        name: data.name,
        authors: data.authors,
        publication: data.publication,
        hotLevel: data.hot_level,
        pdf_link: data.pdf_link,
        date: data.date
      }
    },
    middleData() {
      const data = this.indexData;
      return {
        abstract: data.abstract
      }
    },
    bottomData() {
      const data = this.indexData;
      return {
        citedNum: data.citedNum,
        referenceNum: data.referenceNum,
        references: data.references,
        articleName: data.name,
        directions: data.directions,
        theme: data.theme
      }
    },
    leftData() {
      const data = this.indexData;
      return {
        source: data.source
      }
    },
    rightData() {
      const data = this.indexData;
      return {
        references: data.references
      }
    }
  },
  created() {

  },
  mounted() {
    this.load();
  },
  watch: {
    '$route' (to, from) {
      if(to.params.id !== from.params.id){
        this.load();
      }  
    }
  },
  methods: {
    init() {
      this.indexData = new Object();
      this.loaded = false;
    },
    load() {
      const id = this.$route.params.id;
      request({
        method: 'get',
        url: `/article/${id}`,
      }).then((res) => {
        this.indexData = res.data.data;
        console.log(this.indexData);
        this.loaded = true;
        document.title = this.$route.meta.title + ' | ' + this.indexData.name;
      }).catch((err) => {
        console.log(err);
      });
    }
  },
  components: {
    Background,
    Layout,
    Loading,
    Top,
    Middle,
    Bottom,
    Left,
    Right
  },
};
</script>

<style scoped lang="scss">

.article-page {
  .bg {
    position: fixed;
    z-index: -1;
  }

  article {
    display: flex;
    flex-direction: row;
    width: 1260px;
    margin: 40px auto;
    transition: ease-in-out .25s;

    .left {
      top: 50vh;
      margin-left: 50px;
      transition: ease-in-out .25s;
      @media screen and (max-width: 1280px){
        opacity: 0;
      }
      @media screen and (max-width: 900px){
        display: none;
      }
    }

    .right {
      top: 50vh;
      margin-left: 1140px;
      transition: ease-in-out .25s;
      @media screen and (max-width: 1280px){
        opacity: 0;
      }
      @media screen and (max-width: 900px){
        display: none;
      }
    }



    .main {
      width: 960px;
      margin: 0 auto;
      transition: width ease-in-out .25s;
      @media screen and (max-width: 1024px){
        width: auto;
      }

      .middle {
        margin: 13px 0;
      }

      .bottom {
        margin-top: 10px;
      }
    }

    @media screen and (max-width: 1280px){
      width: 995px;
    }

    @media screen and (max-width: 1024px){
      margin: 20px 10px;
      width: auto;
    }
  }


  .page-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
